import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/data/store/config_store.dart';
import 'package:bxultimate/domain/application/organization/AttendanceUserDto.dart';
import 'package:bxultimate/resources/assets.dart';
import 'package:bxultimate/widgets/indicators/material_indicator.dart';
import 'package:bxultimate/widgets/mk_card_container.dart';
import 'package:bxultimate/widgets/mk_empty.dart';
import 'package:bxultimate/widgets/mk_list_cell_item.dart';
import 'package:bxultimate/widgets/mk_load_image.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class OrganizationAttendanceDetailPage extends StatefulWidget {
  const OrganizationAttendanceDetailPage({Key? key}) : super(key: key);

  @override
  State<OrganizationAttendanceDetailPage> createState() =>
      _OrganizationAttendanceDetailPageState();
}

class _OrganizationAttendanceDetailPageState
    extends State<OrganizationAttendanceDetailPage> {
  final controller = Get.find<OrganizationAttendanceDetailController>();
  final state = Get.find<OrganizationAttendanceDetailController>().state;

  Widget _buildBody() {
    return Padding(
        padding: EdgeInsets.only(
            left: AppTheme.iDefaultPadding, right: AppTheme.iDefaultPadding),
        child: Column(children: [
          Obx(() => _buildNav()),
          Container(
            alignment: Alignment.topLeft,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TabBar(
                  isScrollable: true,
                  indicator: MaterialIndicator(color: Color(0xffFF8362)),
                  indicatorColor: Color(0xFFFF8362),
                  unselectedLabelColor: Color(0xFF606266),
                  labelColor: Colors.black,
                  unselectedLabelStyle: TextStyle(fontSize: 14),
                  labelStyle:
                      TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
                  tabs: controller.tabItem
                      .map((e) => Tab(child: Text(e)))
                      .toList(),
                  controller: controller.tabController,
                ),
                GestureDetector(
                  onTap: controller.showTimeSelect,
                  child: Row(
                    children: [
                      Obx(()=>Text('${state.currentDate}')),
                      Icon(Icons.keyboard_arrow_down)
                    ],
                  ),
                )
              ],
            ),
          ),
          Gaps.vGap8,
          Obx(()=>Expanded(
              child:
              TabBarView(controller: controller.tabController, children: [
                Obx(()=>state.alreadyUserList.length == 0 ? MkEmpty() : Container(
                  width: Get.width,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
                  ),
                  child: Wrap(
                    alignment: WrapAlignment.start,
                    children: [
                      for (int i = 0; i < state.alreadyUserList.length; i++)
                        _buildModuleItem(state.alreadyUserList[i]),
                    ],
                  ),
                )),
                Container(
                  width: Get.width,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(AppTheme.iDefaultRadius),
                  ),
                  child: Wrap(
                    alignment: WrapAlignment.start,
                    children: [
                      for (int i = 0; i < state.noSignedUserList.length; i++)
                        _buildModuleItem(state.noSignedUserList[i]),
                    ],
                  ),
                )
              ])))
        ]));
  }

  _buildModuleItem(AttendanceUserDto attendanceUserDto) {
    return Container(
        width: (Get.width - AppTheme.iDefaultPadding * 2) / 4,
        padding: EdgeInsets.all(AppTheme.iDefaultPadding),
        child: Column(children: [
          MkLoadImage(
            attendanceUserDto.headImg == ''
                ? Assets.imagesIcon
                : ConfigStore.to.baseFileUrl + attendanceUserDto.headImg!,
            width: 40,
            height: 40,
          ),
          Gaps.vGap8,
          Text(
            attendanceUserDto.name!,
            style: TextStyle(fontSize: 12),
          )
        ]));
  }

  _buildNav() {
    return MkCardContainer(
      padding: EdgeInsets.symmetric(horizontal: AppTheme.iDefaultPadding / 2),
      margin: EdgeInsets.all(0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MkListCellItem(
            rightIcon: SizedBox(),
            value: '考勤标题',
            ext: Text('${state.attendanceItem.title}'),
            press: () {},
          ),
          MkListCellItem(
            rightIcon: SizedBox(),
            value: '日期',
            ext: Text(
                '${state.attendanceItem.taskStartTime}至${state.attendanceItem.taskEndTime}'),
            press: () {},
          ),
          MkListCellItem(
            rightIcon: SizedBox(),
            value: '签到地点',
            ext: Text('${state.attendanceItem.address}'),
            press: () {},
          ),
          MkListCellItem(
            rightIcon: SizedBox(),
            value: '签到时间',
            ext: Text('${state.attendanceItem.address}'),
            press: () {},
          ),
          MkListCellItem(
            rightIcon: SizedBox(),
            value: '备注',
            ext: Text('${state.attendanceItem.remark}'),
            press: () {},
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MkPage(
        child: Scaffold(
      backgroundColor: Colors.transparent,
      appBar: TDNavBar(
        backgroundColor: Colors.transparent,
        title: '考勤统计',
      ),
      body: SafeArea(
        child: _buildBody(),
      ),
    ));
  }

  @override
  void dispose() {
    Get.delete<OrganizationAttendanceDetailController>();
    super.dispose();
  }
}
